<template>

    <div class="login_wrap">
        <div class="login_denglu">

            <el-form ref="form" :model="form" label-width="80px">

                <el-form-item label="用户名">
                    <el-input v-model.trim="form.name"></el-input>
                </el-form-item>

                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" v-model.trim="form.password" show-passwword></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" :plain="true" @click="onLogin">登录</el-button>
                    <el-button type="primary" @click="goRegister">注册</el-button>
                </el-form-item>


            </el-form>


        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            form: {
                name: '',
                password: '',

            }
        }
    },
    methods:{
        onLogin(){
            console.log("登录");
            //在登录中触发actions当中的login_a的方法
            this.$store.dispatch("login_a",{
                user_name:this.form.name,
                password:this.form.password,
                routerT:this.$router,
            })
        },
        goRegister(){
            console.log("去注册页面");
            this.$router.push({
                name:"register"
            })
        }
    }
}
</script>

<style lang="scss" scoped>

.login_wrap {
  background-image: url("~@a/img/bggrey.jpg");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_denglu {
    background-image: url("~@a/img/bggrey.jpg");
    background-size: 100% 100%;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

</style>